<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=G5ANxFrbSI3UCD0bmb0AD0MsWj4Y8uXL"></script>
<script type="text/javascript">
function MM_popupMsg(msg) { //v1.0
  alert(msg);
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.gradient {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 600% 600%;
    animation: gradientBG 5s ease infinite;
  }
   @keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
  }
  	.div1{
	height:60px;
	width:1500px;
	margin-left:10px;
	position:inherit;
	margin:auto;
		}
		 .ribbon{
            display: inline-block;
        }
        .ribbon::before{
			width:220px;
            margin-top: 8px;
            content: "";
            border: 24px solid #333;
            border-left-color: transparent;
            float: left;
        }
        .ribbon::after{
			width:680px;
            margin-top: 8px;
            content: "";
            border: 24px solid #333;
            border-right-color: transparent;
            float: left;
        }
        a{
            float: left;
            height: 56px;
            text-decoration: none;
            overflow: hidden;
        }
        span{
            margin-top: 8px;
            color: #fff;
            line-height:48px;
            padding: 0 16px;
            background: #333;
            display: inline-block;
            position: relative;
            transition: all 0.3s;
        }
        a:hover span{
            margin-top: 0;
            background: #666699;
        }
        span::before{
            content: "";
            position: absolute;
            top: 48px;
            left: 0;
            border-right: 8px solid #666699;
            border-bottom: 8px solid #333;
        }
        span::after{
            content: "";
            position: absolute;
            top:48px;
            right: 0;
            border-left: 8px solid #666699;
            border-bottom: 8px solid #333;
        }
</style>
</head>

<body class="gradient">
 <div class="div1"><div class="ribbon">
        <a href="index.html"><span>首页</span></a>
        <a href="dxhz.html"><span>短信测试</span></a>
        <a href="jikeyingjian.html"><span>硬件介绍</span></a>
        <a href="xitongguazai.html"><span>系统挂载</span></a>
        <a href="kali.html"><span>kali实战</span></a>
       <img src="js/assets/img/t.png" height="45px" width="45px" style="border-radius:65px; float:right; margin-top:8px; User-select: none; -webkit-user-drag: none">
    </div></div>
<div style="width:1500px;height:600px;font-size:12px; margin:auto; border-radius:15px" id="map"></div>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){ 
      map = new BMap.Map("map"); 
      map.centerAndZoom(new BMap.Point(117.653579,24.51893),16);
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay(){
    }
    //向地图添加控件
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT});
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,type:3});
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_TOP_LEFT,isOpen:true});
      map.addControl(overviewControl);
    }
    var map;
      initMap();
  </script>
<div style="background-color:#408080; height:450px; width:1500px; margin:auto; position:inherit; padding-top:10px;User-select: none; -webkit-user-drag: none">
  <div style="height:350px; width:1400px; border-radius:15px; background-color:#FFF; margin:auto; text-align:center; font-size:24px; padding-top:20px; margin-top:30px"><h1>地图介绍</h1>
    <p>&nbsp;</p>
    <div style="height:220px; width:1350px; margin-left:20px;"><p>&nbsp;&nbsp;&nbsp;&nbsp;百度地图JavaScript API GL 是一套由JavaScript语言编写的应用程序接口，使用了WebGL对地图、覆盖物等进行渲染，支持3D视角展示地图。帮助开发者在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发。JavaScript API GL提供了丰富的功能接口，包括地图展示、定位、覆盖物、检索、路线规划等，适配多样化的业务场景。</p>
  <p>&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;百度地图JavaScript API支持HTTP和HTTPS，免费对外开放。在使用前，您需先申请密钥（ak）才可使用。在您使用百度地图JavaScript API之前，请先阅读百度地图开放平台《服务条款》。任何非营利性应用请直接使用，商业应用请参考使用。</p><p><marquee><a href="https://lbsyun.baidu.com/index.php?title=jspopularGL">使用方法</a></marquee></p></div>

</div>
</div>
<div style="height:80px; width: 1500px; background-color: #333; margin:auto; padding-top:10px;"><script>
        Date.prototype.format = function (fmt) {
            var o = {
                "y+": this.getFullYear, //年
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds() //秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
        setInterval("document.getElementById('dateTime').innerHTML = (new Date()).format('yyyy-MM-dd hh:mm:ss');", 1000);
    </script>
 
    <div style="font-family:'仿宋'; margin:auto; width:600px; height:70px; font-size:30px; color:#FFF; margin-left:600px; margin-top:10px"><div id="dateTime"></div></div>
</div>

</body>
</html>
